<!DOCTYPE html>
<html>
<head>
    <title>欢迎您的到来</title>
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.min.css">
    <link href="../../resources/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="../../resources/css/plugins/bootstrap-table/bootstrap-table.css"/>
    <link rel="stylesheet" href="../../resources/css/plugins/dialog/bootstrap-dialog.css"/>
    <link rel="stylesheet" href="../../resources/css/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" href="../../resources/css/pluginsExt/Tabledemo/Tabledemo.css"/>
    <script src="resources/js/jquery-2.1.1.js"></script>
    <script src="resources/js/bootstrap/bootstrap.min.js"></script>
    <script src="resources/js/plugins/bootstrap-table/bootstrap-table.js"></script>
    <script src="resources/js/plugins/bootstrap-table/bootstrap-table-zh-CN.js"></script>
    <script src="resources/js/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="resources/js/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="resources/js/plugins/dialog/bootstrap-dialog.js"></script>
    <script src="resources/js/plugins/jqValidate/jquery.validate.min.js"></script>
    <script src="resources/js/messages_zh.js"></script>
</head>
<body>

<div class="container">
    <h1>Bootstrap Table Examples <a href="https://github.com/wenzhixin/bootstrap-table-examples" class="btn btn-primary" role="button" target="_blank">Learn more &raquo;</a></h1>
    <div id="toolbar">
        <button id="remove" class="btn btn-danger" disabled>
            <i class="glyphicon glyphicon-remove"></i> Delete
        </button>
    </div>
    <table id="table"
           data-toolbar="#toolbar"
           data-search="true"
           data-show-refresh="true"
           data-show-toggle="true"
           data-show-columns="true"
           data-show-export="true"
           data-detail-view="true"
           data-detail-formatter="detailFormatter"
           data-minimum-count-columns="2"
           data-show-pagination-switch="true"
           data-pagination="true"
           data-id-field="id"
           data-page-list="[10, 25, 50, 100, ALL]"
           data-show-footer="false"
           data-side-pagination="server"
           data-url="/examples/bootstrap_table/data"
           data-response-handler="responseHandler">
    </table>
</div>

<script>
    var $table = $('#table'),
            $remove = $('#remove'),
            selections = [];
    function initTable() {
        $table.bootstrapTable({
            height: getHeight(),
            columns: [
                [
                    {
                        field: 'state',
                        checkbox: true,
                        rowspan: 2,
                        align: 'center',
                        valign: 'middle'
                    }, {
                    title: 'Item ID',
                    field: 'id',
                    rowspan: 2,
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    footerFormatter: totalTextFormatter
                }, {
                    title: 'Item Detail',
                    colspan: 3,
                    align: 'center'
                }
                ],
                [
                    {
                        field: 'name',
                        title: 'Item Name',
                        sortable: true,
                        editable: true,
                        footerFormatter: totalNameFormatter,
                        align: 'center'
                    }, {
                    field: 'price',
                    title: 'Item Price',
                    sortable: true,
                    align: 'center',
                    editable: {
                        type: 'text',
                        title: 'Item Price',
                        validate: function (value) {
                            value = $.trim(value);
                            if (!value) {
                                return 'This field is required';
                            }
                            if (!/^\$/.test(value)) {
                                return 'This field needs to start width $.'
                            }
                            var data = $table.bootstrapTable('getData'),
                                    index = $(this).parents('tr').data('index');
                            console.log(data[index]);
                            return '';
                        }
                    },
                    footerFormatter: totalPriceFormatter
                }, {
                    field: 'operate',
                    title: 'Item Operate',
                    align: 'center',
                    events: operateEvents,
                    formatter: operateFormatter
                }
                ]
            ],
            data:[{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290355',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1996-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1993-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            }],
        });
        // sometimes footer render error.
        setTimeout(function () {
            $table.bootstrapTable('resetView');
        }, 200);
        $table.on('check.bs.table uncheck.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
            $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
            // save your data, here just save the current page
            selections = getIdSelections();
            // push or splice the selections if you want to save all data selections
        });
        $table.on('expand-row.bs.table', function (e, index, row, $detail) {
            if (index % 2 == 1) {
                $detail.html('Loading from ajax request...');
                $.get('LICENSE', function (res) {
                    $detail.html(res.replace(/\n/g, '<br>'));
                });
            }
        });
        $table.on('all.bs.table', function (e, name, args) {
            console.log(name, args);
        });
        $remove.click(function () {
            var ids = getIdSelections();
            $table.bootstrapTable('remove', {
                field: 'id',
                values: ids
            });
            $remove.prop('disabled', true);
        });
        $(window).resize(function () {
            $table.bootstrapTable('resetView', {
                height: getHeight()
            });
        });
    }
    function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }
    function responseHandler(res) {
        $.each(res.rows, function (i, row) {
            row.state = $.inArray(row.id, selections) !== -1;
        });
        return res;
    }
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }
    function operateFormatter(value, row, index) {
        return [
            '<a class="like" href="javascript:void(0)" title="Like">',
            '<i class="glyphicon glyphicon-heart"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }
    window.operateEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row));
        },
        'click .remove': function (e, value, row, index) {
            $table.bootstrapTable('remove', {
                field: 'id',
                values: [row.id]
            });
        }
    };
    function totalTextFormatter(data) {
        return 'Total';
    }
    function totalNameFormatter(data) {
        return data.length;
    }
    function totalPriceFormatter(data) {
        var total = 0;
        $.each(data, function (i, row) {
            total += +(row.price.substring(1));
        });
        return '$' + total;
    }
    function getHeight() {
        return $(window).height() - $('h1').outerHeight(true);
    }
    $(function () {
        var scripts = [
                    location.search.substring(1) || 'assets/bootstrap-table/src/bootstrap-table.js',
                    'assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js',
                    'http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js',
                    'assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js',
                    'http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js'
                ],
                eachSeries = function (arr, iterator, callback) {
                    callback = callback || function () {};
                    if (!arr.length) {
                        return callback();
                    }
                    var completed = 0;
                    var iterate = function () {
                        iterator(arr[completed], function (err) {
                            if (err) {
                                callback(err);
                                callback = function () {};
                            }
                            else {
                                completed += 1;
                                if (completed >= arr.length) {
                                    callback(null);
                                }
                                else {
                                    iterate();
                                }
                            }
                        });
                    };
                    iterate();
                };
        eachSeries(scripts, getScript, initTable);
    });
    function getScript(url, callback) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.src = url;
        var done = false;
        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function() {
            if (!done && (!this.readyState ||
                    this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                if (callback)
                    callback();
                // Handle memory leak in IE
                script.onload = script.onreadystatechange = null;
            }
        };
        head.appendChild(script);
        // We handle everything using the script element injection
        return undefined;
    }
</script>
</div>
</body>
</html>
